<template>
  <div class="box">
    <el-scrollbar>
      <MusicTop :playlist="state.playlist" :itemList="state.itemList" :length="state.length" />
      <MusicBottom :itemList="state.itemList" />
    </el-scrollbar>
  </div>
</template>

<script>
import MusicTop from "../components/ItemMusic/MusicTop.vue";
import MusicBottom from "../components/ItemMusic/MusicBottom.vue";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import {getMusicData,getBottomData} from "../request/ItemMusic/MusicData";
import { useStore } from 'vuex';

export default {
  setup() {
    const state = reactive({
      playlist:{},
      itemList:[],
      length:''
    })
    onMounted(async () => {
      let id = useRoute().query.id; //获取id
      let res = await getMusicData(id);
      state.playlist = res.data.playlist //获取歌单详情
      let result = await getBottomData(id)
      state.itemList = result.data.songs //获取歌曲列表
      state.length = state.itemList.length//歌曲数量
      let t,ts;
      for(let i =0;i<state.itemList.length;i++){
         t = parseInt((state.itemList[i].dt)/1000/60%60)
         ts = parseInt((state.itemList[i].dt)/1000%60)
       state.itemList[i].dt =(t.toString()<10?'0'+t.toString():t.toString())+':'+ (ts.toString()<10?'0'+ts.toString():ts.toString())//将歌曲时间转换 
      }
      sessionStorage.setItem('itemDetail',JSON.stringify(state)) //把数据转换成json格式保存在本地防止页面刷新数据丢失
    });
    return {state}
  },
    components: {
    MusicTop,
    MusicBottom,
  }
};
</script>

<style lang="less" scoped>
.el-scrollbar {
  height: 500px;
}
</style>
